<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSI餐厅小筑 外卖网</title>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/colors/blue.css" id="theme" rel="stylesheet">
  <!-- react -->
  <script src="../build/react.development.js"></script>
  <script src="../build/react-dom.development.js"></script>
  <script src="../build/babel.min.js"></script>
  <!-- 配置文件 -->
  <script src="../config.js"></script>
</head>

<body>
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
  </div>
  <section id="wrapper">
    <div class="login-register" style="background-image:url(../assets/images/background/total4.jpg);">
      <div class="login-box card">
        <div class="card-body">
          <!-- 组件 -->
          <div id="register"></div>
          <!-- <form class="form-horizontal form-material" id="loginform" action="index.html">
            <h3 class="box-title m-b-20">注册</h3>
            <div class="form-group">
              <div class="col-xs-12">
                <input class="form-control" type="text" required="" placeholder="手机号">
              </div>
            </div>
            <div class="form-group ">
              <div class="col-xs-12">
                <input class="form-control" type="password" required="" placeholder="密码">
              </div>
            </div>
            <div class="form-group">
              <div class="col-xs-12">
                <input class="form-control" type="password" required="" placeholder="确认密码">
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <div class="checkbox checkbox-success">
                  <input id="checkbox-signup" type="checkbox">
                  <label for="checkbox-signup"> 我同意此 <a href="#">协议</a></label>
                </div>
              </div>
            </div>
            <div class="form-group text-center m-t-20">
              <div class="col-xs-12">
                <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light"
                  type="submit">注册</button>
              </div>
            </div>
            <div class="form-group m-b-0">
              <div class="col-sm-12 text-center">
                <div>已有账号？ <a href="login.html" class="text-info m-l-5"><b>登录</b></a></div>
              </div>
            </div>
          </form> -->
        </div>
      </div>
    </div>
  </section>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="js/jquery.slimscroll.js"></script>
  <script src="js/waves.js"></script>
  <script src="js/sidebarmenu.js"></script>
  <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
  <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
  <script src="js/custom.min.js"></script>
  <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
  <script type="text/babel">
    class Register extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          phone: '',
          password: '',
          confirmPassword: '',
        }
        this.handleChange = this.handleChange.bind(this)
        this.register = this.register.bind(this)
      }
      handleChange(event) {
        this.setState({ [event.target.name]: event.target.value });
        console.log(event.target.name, event.target.value)
      }
      register(event) {
        console.log(this.state.confirmPassword === this.state.password)
        if (this.state.phone === '' || this.state.password === '' || this.state.confirmPassword === '') {
          alert('请填写全部字段')
          return
        }
        if (this.state.confirmPassword === this.state.password) {
          $.ajax({
            type: 'POST',
            url: global.targetUrl + 'register',
            data: {
              'userphone': this.state.phone,
              'password': this.state.password
            },
            success: function (res) {
              console.log('返回的',res)
              if (res.resultMsg.code === 1000) {
                location.href = "login.html"
              }
              else {
                alert(res.resultMsg.message)
              }
            }
          })
        }
        console.log(global.targetUrl)
      }
      render() {
        var phone = this.state.phone
        var password = this.state.password
        var confirmPassword = this.state.confirmPassword
        return (
          <div className="form-horizontal form-material" id="loginform">
            <h3 className="box-title m-b-20">注册</h3>
            <div className="form-group">
              <div className="col-xs-12">
                <input className="form-control" type="text" required="" placeholder="手机号" name="phone" value={phone} onChange={this.handleChange}/>
              </div>
            </div>
            <div className="form-group ">
              <div className="col-xs-12">
                <input className="form-control" type="password" required="" placeholder="密码" name="password" value={password} onChange={this.handleChange} />
              </div>
            </div>
            <div className="form-group">
              <div className="col-xs-12">
                <input className="form-control" type="password" required="" placeholder="确认密码" name="confirmPassword" value={confirmPassword} onChange={this.handleChange} />
              </div>
            </div>
            <div className="form-group row">
              <div className="col-md-12">
                <div className="checkbox checkbox-success">
                  <input id="checkbox-signup" type="checkbox"/>
                  <label htmlFor="checkbox-signup"> 我同意此 <a href="#">协议</a></label>
                </div>
              </div>
            </div>
            <div className="form-group text-center m-t-20">
              <div className="col-xs-12">
                <button className="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light"
                onClick={this.register}>注册</button>
              </div>
            </div>
            <div className="form-group m-b-0">
              <div className="col-sm-12 text-center">
                <div>已有账号？ <a href="login.html" className="text-info m-l-5"><b>登录</b></a></div>
              </div>
            </div>
          </div>
        )
      }
    }
    ReactDOM.render(
      <Register />,
      document.getElementById('register')
    )
  </script>
</body>

</html>